<template>
    <div class="ComPdf">
        <iframe :src="url" width="100%" height="100%">
            <p>当前浏览器不支持iframe标签</p>
        </iframe>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
let Props = defineProps({
    urlObj: {
        type: Object,
        default: () => {
            let myBolb = new Blob();
            return myBolb;
        }
    }
})

let url = ref("static/pdfjs/web/viewer.html")

watch(() => Props.urlObj, val => {
    if (val?.size) {
        url.value = "static/pdfjs/web/viewer.html?file=" + encodeURIComponent(getObjectURL(val))
    } else {
        url.value = "static/pdfjs/web/viewer.html"
    }
})

/**将返回的流数据转换为url */
let getObjectURL = (file) => {
    let url = null
    if (window.createObjectURL != undefined) { //basic
        url = window.createObjectURL(file)
    } else if (window.webkitURL != undefined) { //webkit or chrome
        try {
            let binaryData = []
            binaryData.push(file)
            url = window.URL.createObjectURL(new Blob(binaryData), { type: "application/pdf" })
        } catch (error) {
            console.log(error)
        }
    } else if (window.URL != undefined) { //mozilla(firefox)
        try {
            url = window.URL.createObjectURL(file)
        } catch (error) {
            console.log(error)
        }
    }
    return url
}
onMounted(()=>{
    if (Props.urlObj?.size>500) {
        url.value = "static/pdfjs/web/viewer.html?file=" + encodeURIComponent(getObjectURL(Props.urlObj))
    } else {
        url.value = "static/pdfjs/web/viewer.html"
    }
})
</script>

<style  scoped lang='less'>
// @import "@/css/main.less";

.ComPdf {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%;
    iframe {
        border: 0;
    }
}
</style>